import 'package:flutter/material.dart';
const List mylist =[
  {'title':'常用信息',
    'subTitle':'旅客地址/发票',
    'icon':Icon(Icons.info_outline,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false
  },
  {'title':'我的收藏',
    'subTitle':'降价产品提醒',
    'icon':Icon(Icons.favorite_outline,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false
  },
  {'title':'浏览历史',
    'subTitle':'近15天访问记录',
    'icon':Icon(Icons.history_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false
  },
  {'title':'我要合作',
    'subTitle':'供应商加盟代理合作',
    'icon':Icon(Icons.computer_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false
  },
  {'title':'出行工具',
    'subTitle':'航班动态信息',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':true
  },
  {'title':'出行工具',
    'subTitle':'航班动态信息',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false

  },
  {'title':'出行工具',
    'subTitle':'航班动态信息',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':true
  },
  {'title':'我的缓存',
    'subTitle':'124M',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':true,
    'isDiver':false

  },
  {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  },
  {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  }, {'title':'版本信息',
    'subTitle':'V1.0.0',
    'icon':Icon(Icons.flight_outlined,size: 24,color: Colors.blue,),
    'isNext':false,
    'isDiver':false

  },
];

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final  List Mylist =[];
  late ScrollController _scrollController;
  double appBarApha =0;
  @override
  void initState() {
    _scrollController = ScrollController()
    ..addListener(() {

      double offset = _scrollController.offset;
      double alpho = offset/100;
      if(alpho <0){
        alpho = 0;
      } else if(alpho >1){
        alpho = 1;
      }
      setState(() {
        appBarApha = alpho;
      });
    });
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Container(
      child: _buildView(),
      color: Colors.black12,
    ));
  }

  _buildView() {
    return CustomScrollView(
      controller: _scrollController,
      slivers: [
        SliverAppBar(
          pinned: true,
          centerTitle: true,
          expandedHeight: 230,
          flexibleSpace: FlexibleSpaceBar(
            title: Opacity(opacity: appBarApha,child: Text('我的',textAlign: TextAlign.center,),),
            background: Image.network('http://img.haote.com/upload/20180918/2018091815372344164.jpg',
              fit: BoxFit.fitHeight,),
          ),
        ),
        SliverPadding(
            padding: EdgeInsets.only(top: 10,left: 10,right: 10,bottom: 20),
          sliver: _buildSliverGridView(),

        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((content, index) {
            if(index<mylist.length){
              Map item = mylist[index];
              bool isDiver = item['isDiver'];
              if(isDiver){
                return Container(height: 20,color: Colors.black12,);
              }
              return Container(
                height: 54,
                alignment: Alignment.center,
                color: Colors.white,
                child: Row(
                  children: [
                    Container(
                      child: Text(item['title'],style: TextStyle(fontSize: 16,color: Colors.black),),
                      padding: EdgeInsets.only(left: 10),
                    ),
                    Expanded(child: Container()),
                    Container(
                      child: Text(item['subTitle'],style: TextStyle(fontSize: 12,color: Colors.grey),),
                      padding: EdgeInsets.only(right: 10),
                    ),
                    item['isNext']==true?Icon(Icons.navigate_next,color: Colors.grey,):Container()
                  ],
                ),

              );
            }
            return Container(
              height: 64,
              alignment: Alignment.center,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Row(
                children: [
                  Container(child: Text('$index'),)
                ],
              ),

            );
          }, childCount: mylist.length),
        )

      ],
      
    );
  }
  _buildSliverGridView(){
    return SliverGrid.count(
        crossAxisCount: 4,
        crossAxisSpacing: 5,
      mainAxisSpacing:10,
      children: [
       Card(child:  Container(
         color: Colors.white,
         alignment: Alignment.center,
         padding: EdgeInsets.all(20),child: Text('优惠券'),
       ),),
        Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),child: Text('积分'),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            border:  Border.all(color: Color(0xFFFFFF00), width: 0.5),
            gradient: const LinearGradient(
                colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],

            ),
            color: Colors.black12.withOpacity(0.5)
          ),
        ),
        Container(
          color: Colors.white,
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),child: Text('拿去花'),
        ),
        Container(
          color: Colors.white,
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),child: Text('订单'),
        ),
      ],
    );
  }
}
